﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <title>jTopo 入门指南</title>
    <meta name="description" content="jTopo免费的基于HTML5 Canvas的网络拓扑、关系图形库">
    <meta name="keyword" content="jTopo 网络 拓扑 图形库 HTML5 Canvas 免费 关系图形库 javascript topology">
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link href="css/jquery.snippet.min.css" rel="stylesheet">

    <script src="js/jquery.js"></script>
    <script type="text/javascript" src="demo/js/snippet/jquery.snippet.min.js"></script>

    <script src="js/site.js"></script>
    <script src="js/api.js"></script>

    <style>
        .code {
            width: 700px;
        }

        .demo-link {
            margin: 5px 0px 10px 300px;
        }

        li h1 {
            margin-top: 5px;
        }
    </style>

    <script>
        $(document).ready(function () {
            $('.code').snippet('javascript', {style: 'acid', showNum: false})
        })
    </script>
</head>
<body>
<div class="wrap_div">
    <div class="head_nav">
        <h2 class="logo"><a href="index.html" title="jTopo">jTopo</a></h2>
    </div>
    <div class="head_nav_second">
        <ul class="menu" id="nav_menu">

        </ul>
    </div>
    <div class="content">
        <div style="text-align:left; padding:20px 10px 0px 30px;">
            <ol>
                <li>
                    <h1>Hello World!</h1>
                    <pre class="code">
        // &lt;script type="text/javascript" src="js/jtopo-min.js">&lt;/script>    // 引入jtopo
        var canvas = document.getElementById('canvas');
        var stage = new JTopo.Stage(canvas);   // 创建一个舞台对象
        var scene = new JTopo.Scene(stage);    // 创建一个场景对象

        var node = new JTopo.Node("Hello");    // 创建一个节点
        node.setLocation(300,200);             // 设置节点坐标
        scene.add(node);                       // 放入到场景中
                    </pre>
                    <div class="demo-link">
                        <a href="demo/helloworld.html" target="_blank">在线查看效果</a>
                    </div>
                </li>
                <li>
                    <h1>节点设置</h1>
                    <pre class="code">
        var node = new JTopo.Node("Hello");    // 创建一个节点
        node.setLocation(300,200);             // 设置节点坐标
        node.rotate = Math.random();           // 旋转角度
        node.scaleX = Math.random();           // 水平方向的缩放
        node.scaleY = Math.random();           // 垂直方向的缩放
        node.alpha = Math.random();            // 透明度
        node.setImage('host.png');             // 设置图片
                    </pre>
                    <div class="demo-link">
                        <a href="demo/node.html" target="_blank">查看Demo效果</a>
                    </div>
                </li>
                <li>
                    <h1>连线</h1>
                    <pre class="code">

        var stage = new JTopo.Stage(canvas);
        var scene = new JTopo.Scene(stage);

        var nodeFrom = new JTopo.Node("from");
        nodeFrom.setLocation(200,200);
        scene.add(nodeFrom);

        var nodeTo = new JTopo.Node("To");
        nodeTo.setLocation(300,200);
        scene.add(nodeTo);

        var link = new JTopo.Link(nodeFrom, nodeTo);    // 增加连线
        scene.add(link);
                    </pre>
                    <div class="demo-link">
                        <a href="demo/link.html" target="_blank">查看Demo效果</a>
                    </div>
                </li>
            </ol>
        </div>
    </div>
</div>
<div class="footer"></div>
</body>
</html>
